<template>
  <view class="container">
    <!-- 添加私聊和群聊按钮 -->
    <view class="top">
      <view class="top1" @click="getMyPrivateChat" :class="{ active: select === 1 }">私聊</view>
      <view class="top2" @click="getMyChat" :class="{ active: select === 2 }">群聊</view>
    </view>
    <!-- 显示聊天列表 -->
    <view v-if="chatList.length > 0 && this.select===2">
      <view @click="gotoChat(chat.tuanId)" class="chat-item0" v-for="(chat, index) in chatList" :key="index">
        <view>{{ chat.title }}</view>
        <view class="chat-message">{{ chat.lastMessage }}</view>
      </view>
    </view>
    <view v-else-if="chatList.length === 0 && this.select===2">
      暂无群聊消息~
    </view>

    <view v-if="this.select===1 && privateChatList.length > 0">
      <view @click="gotoPrivateChat(privateChat.simpleUserVo.userId,privateChat.simpleUserVo.userName)" class="chat-item" v-for="(privateChat, index) in privateChatList" :key="index">
        <image
            :src="privateChat.simpleUserVo.avatar"
            mode="scaleToFill"
        />
        <view class="chat-content">
            <view>{{ privateChat.simpleUserVo.userName }}</view>
            <view class="chat-message">{{ privateChat.lastMessage }}</view>
        </view>
      </view>
    </view>
    <view v-else-if="this.select===1 && privateChatList.length === 0">
      暂无私聊消息~
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userId: uni.getStorageSync("userId"),
      chatList: [],
      privateChatList: [],
      select: 1,
    };
  },
  onLoad(options) {
    this.getMyPrivateChat(); // 默认加载私聊
  },
  methods: {
    gotoPrivateChat(theUserId, theUserName){
        uni.navigateTo({
            url: `/subpkg/private_chat/private_chat?theUserId=${theUserId}&theUserName=${theUserName}`
        })
    },
    //获取群聊信息
    gotoChat(tuanId){
      uni.navigateTo({
          url: `/subpkg/chat_interface/chat_interface?tuanId=${tuanId}`
        });
    },
    
    getMyChat() {
        this.select = 2,
      uni.$http
        .get(`/chat/getAllChat?userId=${this.userId}`)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.chatList = res.data.data;
          } else {
            console.log("获取群聊列表失败");
          }
        })
        .catch((err) => {
          console.log("获取群聊列表失败", err);
        });
    },
    getMyPrivateChat() {
        this.select = 1;
      uni.$http
        .get(`/chat/getAllPrivateChat?userId=${this.userId}`)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.privateChatList = res.data.data;
          } else {
            console.log("获取私聊列表失败");
          }
        })
        .catch((err) => {
          console.log("获取私聊列表失败", err);
        });
    },
  },
};
</script>

<style lang="scss">
.container {
}

.top {
  display: flex;
  width: 100vw;
  .top1, .top2 {
    display: flex;
    flex: 1;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 40px;
    background-color: #fff;
    transition: background-color 0.3s; // 添加过渡效果
  }
  .top1.active, .top2.active {
    background-color: #e0e0e0; // 选中时的背景颜色
  }
}

.chat-item {
    display: flex;
    background-color: #fff;
    padding: 7px 10px;
    image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .chat-content {
        margin-left: 10px;
        .chat-message {
            margin-top: 3px;
            font-size: 13px;
            color: #727272;
        }
    }
}
.chat-item0 {
    background-color: #fff;
    padding: 7px 10px;
    .chat-message {
            margin-top: 3px;
            font-size: 13px;
            color: #727272;
        }
}
</style>